<template>
  <div class="process" @mouseenter="isHover = true" @mouseleave="isHover = false">
    <div class="process__container" :class="[modelValue?.width ? `container-content-${modelValue?.width}` : 'container-content']">
      <template v-if="vsWidth >= 768">
        <div class="process__desktop">
          <ProcessDesktop
            :data="modelValue?.data"
            :activeIdx="activeIdx"
            @updateIdx="activeIdx = $event"
          />
        </div>
      </template>

      <template v-else>
        <div class="process__mobile">
          <ProcessAccordion
            :data="modelValue?.data"
            :activeIdx="activeIdx"
            @updateIdx="activeIdx = $event"
          />
        </div>
      </template>
    </div>

    <Operate v-if="!isPreview" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy" @handle-paste="handlePaste"></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import ProcessDesktop from './ProcessDesktop.vue'
import ProcessAccordion from './ProcessAccordion.vue'
import Setting from './setting.vue'
import Operate from '@/common/Operate/index.vue'
import { randomString } from '@/utils/common'

// 定义组件名称
defineOptions({
  name: 'Process'
})

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste'])

const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'Process',
    width: '',
    data: {
      id: randomString(),
      title: '发展历程',
      noWrap: false,
      btnList: [
        {
          id: randomString(),
          type: '',
          text: '了解更多',
          url: 'https://www.baidu.com',
          isExternal: false,
        },
        {
          id: randomString(),
          type: '',
          text: '了解更多',
          url: 'https://www.baidu.com',
          isExternal: false,
        },
      ],
      processes: [
        {
          id: randomString(),
          date: '1900',
          title: '标题1',
          desc: '<p>发简历<strong>放假啊冷风机阿拉法久</strong>啊拉法基阿拉法久啊反垃圾阿拉法</p>',
          imgSrc: 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg',
          linkList: [
            {
              id: randomString(),
              type: 'circle',
              text: '了解更多',
              url: 'https://www.baidu.com',
              isExternal: false,
              isLight: false
            },
            {
              id: randomString(),
              type: 'circle',
              text: '了解更多',
              url: 'https://www.baidu.com',
              isExternal: false,
              isLight: true
            }
          ]
        },
        {
          id: randomString(),
          date: '1900',
          title: '标题1',
          desc: '<p>发简历<strong>放假啊冷风机阿拉法久</strong>啊拉法基阿拉法久啊反垃圾阿拉法</p>',
          imgSrc: 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg',
          linkList: [
            {
              id: randomString(),
              type: 'circle',
              text: '了解更多',
              url: 'https://www.baidu.com',
              isExternal: false,
              isLight: false
            },
            {
              id: randomString(),
              type: 'circle',
              text: '了解更多',
              url: 'https://www.baidu.com',
              isExternal: false,
              isLight: true
            }
          ]
        }
      ]
    }
  }
  emit('update:modelValue', data)
} 

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit('handleDelete', props.modelValue.id)
}

const handleCopy = () => {
  emit('handleCopy', props.modelValue)
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

handleInit()

// 响应式数据
const activeIdx = ref(0)
const vsWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)

// 窗口大小监听（SSR 安全）
const updateViewportSize = () => {
  if (typeof window !== 'undefined') {
    vsWidth.value = window.innerWidth
  }
}

// 生命周期钩子
onMounted(() => {
  if (typeof window !== 'undefined') {
    window.addEventListener('resize', updateViewportSize)
    updateViewportSize()
  }
})

onBeforeUnmount(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('resize', updateViewportSize)
  }
})
</script>

<style lang="scss" scoped>
.process {
  position: relative;
  
  @media (max-width: 767.98px) {
    background-color: #fff;
    padding-top: 24px;
  }

  &__container {
    @media (min-width: 768px) and (max-width: 1281px) {
      padding-left: 0;
      padding-right: 0;
    }

    @media (max-width: 767.98px) {
      padding-left: 10.5px;
      padding-right: 10.5px;
      max-width: calc(var(--max-width) + 21px);
    }
  }

  &__wrapper {
    display: flex;

    .fade-enter-active {
      transition: opacity 0.2s ease-in-out;
    }

    .fade-leave-active {
      transition: opacity 0.15s ease-in-out;
    }

    .fade-enter,
    .fade-leave-to {
      opacity: 0.3;
    }

    .fade-enter-to,
    .fade-leave {
      opacity: 1;
    }
  }

  &__mobile {
    width: 100%;
  }
}
</style>